<template>
  <div class="app-container">
    <el-button @click="downloadSeat()">下载座位表</el-button>
    <div>
      <el-select v-model="semeId" placeholder="请选择" @change="handlerGetMergeClass()">
        <el-option
          v-for="item in semeList"
          :key="item.semeId"
          :label="item.semeName"
          :value="item.semeId">
        </el-option>
      </el-select>
    </div>
    <el-row :gutter="20">
      <el-col :md="8">
        <el-row>
          <el-col>
            <el-card style=" padding-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>待分配分党校</span>
              </div>
              <draggable v-loading="allLoading" style="min-height: 100px;" v-model="waitDeptList" group="dept" @start="drag=true" @end="drag=false" v-bind="dragOptions">
                <div v-for="(waitDept, index) in waitDeptList">
                  <div class="dept-border">
                    <span>{{waitDept.deptName}}</span> <span class="student-number">{{waitDept.studentNum}}</span>
                  </div>
<!--                  <el-divider v-if="index !== waitDeptList.length -1"/>-->
                </div>
              </draggable>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="16">
        <el-card style=" padding-bottom: 20px" v-for="(mergeClass, index) in mergeClassList">
          <div slot="header" class="clearfix">
            <span>{{index +1}}合班</span>
            <el-button class="save-button" @click="handlerSave(index)">保存</el-button>
          </div>
          <el-row :gutter="15">
            <draggable style="min-height: 100px;"
                       v-model="mergeClassList[index]"
                       group="dept"
                       @start="drag=true"
                       @end="drag=false"
                       v-bind="dragOptions"
                       v-loading="allLoading">

              <el-col :md="12" v-for="(dept, deptIndex) in mergeClass">
                <div class="dept-border">
                  <span>{{dept.deptName}}</span> <span class="student-number">{{dept.studentNum}}</span>
                </div>
  <!--              <el-divider v-if="deptIndex !== mergeClass.length -1"/>-->
              </el-col>
            </draggable>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { listSimpleSemester } from "@/api/psedu-base/semester";
import { getMergeClass, saveMergeClass } from "@/api/psedu-base/mergeClass"
import draggable from 'vuedraggable'
import { downloadSeatExcel } from '@/api/psedu-base/seat'

export default {
  name: "AssignSeat",
  components: {
    draggable
  },
  data() {
    return {
      allLoading: false,
      semeList:[],
      semeId: "",
      waitDeptList: [],
      mergeClassList: [
        []
      ],
      trainName: "",
    }
  },
  created() {
    this.allLoading = true;
    this.getSemeList()
      .then(res => {
        return this.handlerGetMergeClass()
      }).then( () =>
        this.allLoading = false
    );
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  methods: {
    getSemeList() {
      return listSimpleSemester().then(resp => {
        this.semeList = resp.data;
        this.semeId = this.semeList[0].semeId;
        return Promise.resolve();
      })
    },
    handlerGetMergeClass() {
      this.allLoading = true;
      return getMergeClass(this.semeId).then(res => {
        let data = res.data;
        this.waitDeptList = data.waitDeptList
        this.mergeClassList = data.mergeClassList;
        this.trainName = data.trainName;
        this.allLoading = false;
        return Promise.resolve();
      })
    },
    handlerSave(index) {
      let data = {};
      data.semeId = this.semeId;
      data.mergeClassId = index +1;
      let deptList = this.mergeClassList[index] ?? [];
      data.deptIds =  deptList.map((dept) => {
        return dept.deptId;
      })
      this.allLoading = true;
      saveMergeClass(data).then(res => {
        this.$message.success("修改成功");
        this.allLoading = false;
      })
    },
    downloadSeat() {
      downloadSeatExcel(this.semeId, this.trainName);
    }
  }
}
</script>

<style scoped>
.student-number {
  display: inline-block;
  background-color: #777777;
  color: white;
  border-radius: 10px;
  padding: 2px 10px;
  margin-right: 5px;
  font-size: 12px;
}
/deep/ .el-divider--horizontal {
  margin: 8px 0;
}
.dept-border {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 3px;
}
.save-button {
  margin-left: 15px;
}
</style>
